<!-- 真人认证 -->
<template>
  <view class="authentication-video-box">
    <view class="auth-base-box" v-if="true">
      <view class="authentication-video-base">
        <van-image fit="cover" width="228rpx" height="272rpx" :src="state.photoImg" />
      </view>
      <view class="upload-content-title upload-content-title-tips">
        图片示例
      </view>
      <!-- <view class="authentication-video-photo" @click="state.show = true">
        点击上传照片
      </view> -->
      <view class="upload-content-box">
        <view class="upload-content-title">
          请上传本人露脸照片，系统将进行人脸对比
        </view>
        <view class="upload-content-list">
          <view class="upload-content-item" v-for="(item, index) in state.authImgList" :key="item.ID">
            <van-image width="220rpx" height="220rpx" fit="cover" radius="4" :src="item.Path" />
            <img class="close-btn" src="@/assets/image/icon48.png" @click="delImage(index)" />
          </view>
          <view class="upload-content-item">
            <van-image width="220rpx" height="220rpx" fit="cover" radius="4" :src="c2"
              @click="state.isPhoto = !state.isPhoto" />
          </view>
        </view>
      </view>
    </view>
    <view class="authentication-success" v-if="state.authResult.RealState == 1">
      <view class="authentication-success-box">
        <img src="@/assets/image/icon87.png" alt="">
        <view>认证成功</view>
      </view>
    </view>
    <view class="authentication-success" v-if="state.authResult.RealState == 4">
      <view class="authentication-success-box">
        <img src="@/assets/image/icon88.png" alt="">
        <view>正在审核中，请稍等...</view>
      </view>
    </view>
    <view class="authentication-success" v-if="state.authResult.RealState == 2">
      <view class="authentication-success-box">
        <img src="@/assets/image/icon90.png" alt="">
        <view>认证失败...</view>
      </view>
    </view>
    <view class="authentication-bottom-btn">
      <view class="authentication-bottom-top">
        <van-button type="primary" @click="authFn()">认证</van-button>
      </view>
    </view>
  </view>
  <UploadHeadPhoto v-if="state.isPhoto" :isShow="state.isPhoto" @update:isShow="(ev) => state.isPhoto = ev"
    @update:checkImg="ev => state.authImgList = state.authImgList.concat(ev)" />
</template>
 
<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import c1 from "@/assets/image/icon87.png"
import c2 from "@/assets/image/icon88.png"
import c3 from "@/assets/image/icon90.png"
import UploadHeadPhoto from '@/components/uploadHeadPhoto/index.vue'
import AuthError from "@/pages/home/components/authError/index.vue"
const state = reactive({
  photoImg: c1,
  isPhoto: false,
  show: false,
  c2,
  authImgList: [],
  authResult:{}
})

import {
  UserRealAuthStart,
} from "@/api/auth/index.js"

// 女神认证
const UserRealAuthStartFn = async () => {
  let params = {
    "authType": 1,
    "userImgFileID": 0,
    "fileIDs": state.authImgList.map(o => o.ID)
  }
  try {
    uni.showLoading({})
    let data = await proxy.$post(UserRealAuthStart, params)
    state.isVideo = false
    uni.hideLoading()
    UserRealAuthResultFn() // 获取认证结果
  } catch (error) {
    uni.showToast({
      title: error.message,
      icon: "none"
    })
    state.isVideo = false
    uni.hideLoading()
  }
}

const delImage = (index) => {
  state.authImgList.splice(index, 1)
}

const authFn = () =>{
  if(state.authImgList.map(o => o.ID)){
    
  }
  UserRealAuthStartFn()
}

// 获取认证结果
import {
  UserRealAuth
} from "@/api/person/index.js"

const UserRealAuthResultFn = async () => {
  let data = await proxy.$get(UserRealAuth)
  if (data.code == 200) {
    state.authResult = data.data.find(o => o.RealType == 1)
    setAuthorization("UserRealAuth", data.data)
    // 认证次数大于 1 
    if(state.authResult.RealState == 1){
      UserAuthCountFn()
    }
  }
}

onLoad((options) => {
  UserRealAuthResultFn()
})

const { proxy } = getCurrentInstance();



</script>

<style lang="scss" scoped>
.authentication-video-box {
  padding-top: 30rpx;
  background: #F7F8F9;
  min-height: calc(100vh - 80rpx);
  box-sizing: border-box;

  .authentication-video-base {
    display: flex;
    justify-content: center;
    padding-top: 40rpx;
  }
}

.authentication-tips-list {
  padding: 40rpx 30rpx;
}

.authentication-bottom-btn {
  position: fixed;
  bottom: 0;
  width: 100vw;
  padding-bottom: 20rpx;

  .authentication-bottom-top {
    display: flex;
    justify-content: center;

    .van-button {
      width: calc(100% - 60rpx);
      height: 100rpx;
      line-height: 100rpx;
      font-size: 36rpx;
    }
  }

  .authentication-bottom-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;

    img {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }

    text {
      color: #999;
      font-size: 24rpx;
    }
  }
}

.upload-content-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #262626;
  margin: 20rpx auto;
  text-align: center;
}

.upload-content-box {
  margin-top: 60rpx;
  padding: 1rpx 0 20rpx 0;
  border-radius: 8rpx;
  background: #fff;
}

.upload-content-list {
  display: flex;
  // justify-content: space-between;
  margin-top: 30rpx;
  flex-wrap: wrap;

  .upload-content-item {
    position: relative;
    margin: 0 0 20rpx 20rpx;
    // width: 200rpx;
    // height: 200rpx;
    .close-btn {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 48rpx;
      height: 48rpx;
    }
  }

  .van-uploader {
    width: 220rpx;
    height: 220rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
  }
}

.authentication-success-box {
  margin: 0 auto;
  text-align: center;

  img {
    width: 350rpx;
  }

  text {
    display: block;
    color: #262626;
    font-weight: 600;
    margin-top: 20rpx;
  }
}
</style>